<template>
	<view class="daily">
		<view class="">
			<week-calendar />
		</view>
		<view class="divination">
			<image src="@/static/images/home/planet-bg.png" mode=""></image>
			<view class="flex-r planet s-b">
				<view class="left">
					占位图
				</view>
				<view class="right flex-c">
					<view class="flex-r s-b a-c">
						<view class="title flex-r">
							<view class="iconfont">&#xe751;</view>
							当前行星能量
						</view>
						<text class="iconfont">&#xe763;</text>
					</view>
					<view class="flex-c details">
						<view class="">
							<text class="text1">36.3</text><text class="text2">家人卦</text>
						</view>
						<text>今日重点在「转化危机」与「建立边界」，可随身携带36号闸门对应黑曜石增强决断力</text>
					</view>
				</view>
			</view>
		</view>
		<view class="report flex-r mt-2">
			<view :class="{'rep-active':reports==1}" @click="reports = 1">
				今日能量报告
			</view>
			<view :class="{'ml-1':true,'rep-active':reports==2}" @click="reports = 2">
				核心行星闸门解读
			</view>
		</view>
		<view class="report-ai mt-2">
			ai内容
		</view>
	</view>
</template>

<script setup>
	import weekCalendar from './weekCalendar.vue'
	import {
		ref,
		reactive
	} from 'vue'

	let reports = ref(1)
</script>

<style lang="scss" scoped>
	.daily {
		background-color: #fff;
		padding:20rpx;
		.divination {
			height: 300rpx;
			border-radius: 20rpx;
			position: relative;

			image {
				height: 300rpx;
				width: 100%;
			}

			.planet {
				position: absolute;
				left: 0;
				top: 0;

				.left {
					width: 236rpx;
					height: 300rpx;
					background-color: #F6EDFF;
					border-radius: 20rpx 60rpx 60rpx 20rpx;
				}

				.right {
					width: 460rpx;

					.title {
						text-indent: 1em;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #B86A4F;
					}

					.details {
						padding-left: 20rpx;

						>view {
							.text1 {
								font-weight: 500;
								font-size: 50rpx;
								line-height: 72rpx;
							}

							.text2 {
								font-weight: 500;
								font-size: 32rpx;
								line-height: 44rpx;
							}
						}

						>text {
							font-size: 24rpx;
							line-height: 42rpx;
						}
					}
				}
			}
		}

		.report view {
			line-height: 70rpx;
			font-size: 28rpx;
			color: #4D4D4D;
			background-color: #FFFBEA;
			border-radius: 36rpx;
			padding: 0 30rpx;
		}

		.report {
			.rep-active {
				background-color: #FF9281;
				color: #fff;
			}
		}
	}
</style>